<template>
  <div class="container">
    <navbar
      :vaniconL="true"
      :vaniconR="true"
      :noRight="true"
      :noLeft="false"
      iconNameL="arrow-left"
      iconNameR="search"
      @clickLeft="goBaCK"
    >分享设置</navbar>

    <div class="set">
      <p class="text">二维码过期时间</p>
      <van-radio-group v-model="radio">
        <div class="code-select">
          <van-radio name="15">15分钟</van-radio>
          <van-radio name="45">45分钟</van-radio>
        </div>
        <div class="code-select">
          <van-radio name="30">30分钟</van-radio>
          <van-radio name="60">60分钟</van-radio>
        </div>
      </van-radio-group>
      <p class="text">安全密码保护</p>
      <van-radio-group v-model="pradio" @change="passChange">
        <van-radio class="pass" name="1">需要</van-radio>
        <van-radio class="pass" name="2">不需要</van-radio>
        <van-icon
          v-if="needFlag"
          @click="hideFlag = !hideFlag"
          class="hideicon"
          :name="hideFlag?'eye-o':'closed-eye'"
        />
        <!-- <van-icon class="hideicon" name="closed-eye" /> -->
      </van-radio-group>
      <div v-if="needFlag">
        <!-- 密码输入框 -->
        <van-password-input
          :mask="!hideFlag"
          :value="value"
          :length="4"
          info="密码为 4 位数字"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          :show="showKeyboard"
          @input="onInput"
          @delete="onDelete"
          @blur="showKeyboard = false"
        />
      </div>
    </div>
    <van-button type="primary" @click="submitMes" color="#4775d9" block>确定</van-button>
  </div>
</template>

<script>
import { Toast } from "vant";
import navbar from "@/components/navbar";
import { getUserShareOption, saveUserShareOption } from "@/api/share";
import { mapGetters } from "vuex";
export default {
  name: "share",
  components: { navbar },
  data() {
    return {
      radio: "30",
      pradio: "2",
      value: "",
      showKeyboard: true,
      needFlag: false,
      openid: null,
      hideFlag: false,
      userDatas: null
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    // 返回上一页
    goBaCK() {
      this.$router.go(-1);
    },
    //
    passChange(val) {
      val == "1"
        ? (this.needFlag = true)
        : ((this.needFlag = false), (this.value = ""));
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 4);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    //
    async submitMes() {
      let { radio, value, needFlag, openid } = this;
      if ((needFlag && value.length == 4) || !needFlag) {
        value = value.length == 0 ? null : value;
        let res = await saveUserShareOption(openid, radio, value);
        if (res.status.code == 200) {
          this.$router.replace({ path: "/mine" });
          Toast.success("保存成功");
        }
      } else {
        Toast.fail("请输入安全密码！");
      }
    },
  },
  async created() {
    let toast1 = Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
    // this.openid = this.userData.info ? this.userData.info.openId : null;
    this.userDatas = JSON.parse(this.userData);
    // this.openid = "ou-IA1XlO3rg_g3Ljsgh0oq3NjDg";
    this.openid = this.userDatas.phone;
    let shareData = await getUserShareOption(this.openid);
    if (shareData.status.code == 200) {
      this.radio = String(shareData.data.expire);
      if (shareData.data.secret === null) {
        this.needFlag = false;
        this.pradio = "2";
      } else {
        this.value = String(shareData.data.secret);
        this.needFlag = true;
        this.pradio = "1";
      }
    } else {
      Toast.fail(shareData.status.msg);
    }
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  & .set {
    width: 94%;
    background: #fff;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
    padding-bottom: 15px;
    & .van-radio {
      margin: 0.2rem 0 0.1rem;
    }
    & .van-radio-group {
      display: flex;
    }
    & .code-select:nth-of-type(1) {
      margin-left: 0.1rem;
    }
    & .code-select:nth-of-type(2) {
      margin-left: 0.65rem;
    }
    & .text {
      padding: 0.1rem 0.1rem 0 0.1rem;
      text-align: left;
      font-size: 0.16rem;
      font-weight: 600;
    }
    & .pass:nth-of-type(1) {
      margin-left: 0.1rem;
    }
    & .pass:nth-of-type(2) {
      margin-left: 0.8rem;
    }
    & /deep/ .van-radio__label {
      font-size: 0.16rem;
    }
  }
  & .van-button {
    width: 94%;
    margin: auto;
    margin-top: 0.2rem;
  }
  & .van-password-input {
    margin-top: 0.1rem;
  }
}
.hideicon {
  margin: 0.2rem 0 0.1rem 0.76rem;
  font-size: 0.25rem;
}
</style>